<template>
    <div>
        <el-dialog center :before-close='close' title="编辑会员" :visible.sync="info.isShow">
            <el-form :model="memberInfo" :rules="rules" ref="memberForm">
                <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
                    <el-input v-model="memberInfo.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称" :label-width="formLabelWidth">
                    <el-input v-model="memberInfo.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="memberInfo.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="memberInfo.status" active-color="#13ce66" inactive-color="#ff4949"
                        :active-value="1" :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 引入接口
import {memberInfo,memberEdit} from '../../request/api'
// 辅助性函数
import {mapActions} from 'vuex'
export default {
    props: ['info'],
    data() {
        return {
            memberInfo: {
                uid: '',
                nickname: '',
                phone: '',
                password: '',
                status: 1,
            },
            formLabelWidth: '120px',
            rules: {
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '请输入正确手机号', trigger: 'blur' }
                ],
            }
        };
    },
    methods: {
        ...mapActions({
            memberListAction:'member/memberListAction'
        }),
        // 取消按钮
        close() {
            this.$emit('close', false)
        },
       
        // 回显
        lookup(uid){
            console.log(uid,'idididididid');
            // 调用查询接口
            memberInfo({uid})
            .then(res=>{
                console.log(res,'一条数据');
                this.memberInfo = res.list
                this.memberInfo.password = ''
                this.memberInfo.uid = uid
            })
        },
        // 确认事件
        confirm(){
             this.$refs.memberForm.validate(flag=>{
                if(flag){
                    // 验证成功
                    // 调用编辑接口
                    console.log(this.memberInfo,'表单');
                    memberEdit(this.memberInfo)
                    .then(res=>{
                        console.log(res,'编辑成功');
                        if(res.code == 200){
                            this.$message.success(res.msg)
                            // 重新调用列表接口
                            this.memberListAction()
                            // 关闭弹窗
                            this.close()
                        } else{
                            this.$message.error(res.msg)
                        }
                    })
                } else {
                    // 验证失败
                }
             })
        }
    }
};
</script>

<style  lang="less" scoped>
</style>
